<template>
  <div class="home">
    <Header/>
    <Navigation></Navigation>
    <div class="content">
      <div class="slide">
        <el-carousel height="750px">
          <el-carousel-item v-for="item in slideArr" :key="item.id">
            <el-image style="width: 100%; height: 100%" :src="item.url" :key="item.url"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="software">
        <h2>软件</h2>
        <ul>
          <li>
            <div class="icon">
              <i class="el-icon-message-solid"></i>
            </div>
            <div class="title">
              <h3>智慧食安监管云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
          <li>
            <div class="icon">
              <i class="el-icon-video-camera-solid"></i>
            </div>
            <div class="title">
              <h3>智能视频监管云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
          <li>
            <div class="icon">
              <i class="el-icon-s-marketing"></i>
            </div>
            <div class="title">
              <h3>智慧食安大数据云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
          <li>
            <div class="icon">
              <i class="el-icon-s-help"></i>
            </div>
            <div class="title">
              <h3>智慧食安检测云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
          <li>
            <div class="icon">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="title">
              <h3>智慧食安应急管理云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
          <li>
            <div class="icon">
              <i class="el-icon-s-comment"></i>
            </div>
            <div class="title">
              <h3>智慧食安宣教云平台</h3>
              <div>
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Dolorem harum aspernatur sapiente error, voluptas fuga,
                laudantium ullam magni fugit. Qui!
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="service">
        <h2>服务</h2>
        <ul>
          <li>
            <div class="title">
              <img src="@/assets/home/free.jpg" alt>
            </div>
            <div class="tip">
              <div class="tip_title">免费版</div>
              <div
                class="tip_more"
              >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, voluptas corporis. Maxime sapiente, adipisci laborum.</div>
            </div>
          </li>

          <li>
            <div class="title">
              <img src="@/assets/home/mclz.jpg" alt>
            </div>
            <div class="tip">
              <div class="tip_title">明厨亮灶版</div>
              <div
                class="tip_more"
              >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, voluptas corporis. Maxime sapiente, adipisci laborum.</div>
            </div>
          </li>

          <li>
            <div class="title">
              <img src="@/assets/home/other.jpg" alt>
            </div>
            <div class="tip">
              <div class="tip_title">其他版本</div>
              <div
                class="tip_more"
              >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, voluptas corporis. Maxime sapiente, adipisci laborum.</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="about">
        <div class="left">
          <h2>我们</h2>
          <diV
            class="tip"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis</diV>
        </div>
        <div class="right">
          <img src="@/assets/home/us.png" alt>
        </div>
      </div>
      <Footer></Footer>
      <el-button
        v-show="btnFlag"
        @click="backTop"
        class="top"
        type="primary"
        icon="el-icon-top"
        circle
      ></el-button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import Navigation from "@/components/Navigation.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "home",
  data() {
    return {
      btnFlag: false,
      scrollTop: 0,
      slideArr: [
        {
          id: 0,
          url: require("../assets/home/banner_1.png")
        },
        {
          id: 1,
          url: require("../assets/home/banner_3.png")
        },
        {
          id: 2,
          url: require("../assets/home/banner_1.png")
        },
        {
          id: 3,
          url: require("../assets/home/banner_3.png")
        }
      ]
    };
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10);
    },
    //导航栏点击 触发滚动
    toScroll(e) {
      let scrollTop = 1;
      let timer = setInterval(() => {
        // console.log(scrollTop, e);

        let ispeed = Math.ceil(e / 15);
        if (e <= scrollTop || scrollTop >= e - 50) {
          scrollTop = document.documentElement.scrollTop = document.body.scrollTop = e;
          clearInterval(timer);
        } else {
          scrollTop = document.documentElement.scrollTop = document.body.scrollTop =
            scrollTop + ispeed;
        }
      }, 20);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  components: {
    Header,
    Navigation,
    Footer
  }
};
</script>
<style lang="scss">
@import "@/assets/css/index.scss";
.content {
  .software {
    margin-top: 50px;
    h2 {
      font-size: 42px;
      font-weight: 300;
      text-align: center;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0;
      padding: 0 100px;
      li {
        list-style: none;
        width: 40%;
        display: flex;
        padding: 50px 0;
        .icon {
          color: $txt;
          font-size: 30px;
          width: 200px;
          height: 76px;
          display: flex;
          align-items: center;
        }
        .title {
          font-size: 22px;
          font-weight: 500;

          h3 {
            font-size: 22px;
            font-weight: 300;
          }
          div {
            font-weight: 300;
            font-size: 16px;
            color: $stxt;
          }
        }
      }
    }
  }
  .service {
    background: $bg;
    padding-bottom: 100px;
    h2 {
      font-size: 42px;
      font-weight: 300;
      text-align: center;
      line-height: 160px;
    }
    ul {
      padding: 0 100px;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 30%;
        padding: 0;
        list-style: none;
        background: $navbg;
        transition: all 0.5s;
        &:hover {
          box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
        }
        &:hover .tip_title {
          color: $txt;
        }
        .title {
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tip {
          width: 100%;
          font-weight: 300;
          padding: 25px;
          box-sizing: border-box;
          .tip_title {
            font-size: 22px;
          }
          .tip_more {
            margin-top: 20px;
            color: $stxt;
          }
        }
      }
    }
  }
  .about {
    display: flex;
    justify-content: space-between;
    padding: 100px 100px 0;

    h2 {
      font-size: 42px;
      font-weight: 300;
    }
    .left {
      width: 40%;
      .tip {
        color: $stxt;
        font-size: 16px;
      }
    }
    .right {
      width: 500px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .top {
    position: fixed;
    bottom: 5%;
    right: 2%;
  }
}
</style>
